<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心-修改密码</title>
</head>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 56px;!important;
        height: 56px;!important;
    }

    .el-aside {
        /*color: #333;*/
        color: #545c64;
    }

    body > .el-container {
        margin-bottom: 40px;
        height: 100%;
    }

    body, html {
        height: 100%;
    }

    .profile {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 500px;
        height: 450px;
        margin-left: -190px;
        margin-top: -200px;
        padding: 40px;
        border-radius: 5px;
        background: black;
        opacity: 0.85;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        height: 240px !important;
        width: 200px !important;
    }
</style>
<body>
<div id="app">
    <!--顶部用户导航栏-->
    <template>
        <div style="font-size: 14px;">
            <div style="display: flex;height: 60px;padding: 0 320px;background-color: #f5f5f5;border-radius: 10px">
                <div v-show="visibleAlready" style="margin-top: 3px">
                    <el-col :span="6">
                        <el-avatar style="height: 50px;width:50px;" :src="User.userImg"></el-avatar>
                    </el-col>
                    <el-col :span="18" style="line-height:50px">
                        <span style="padding-right: 30px;line-height: 40px;color: #666;margin-left:30px">{{User.realName}}</span>
                    </el-col>
                </div>
                <div v-show="visibleNotYet" style="margin-top: 10px">
                    <span style="padding-right: 20px;line-height: 40px;color: #666;">欢迎光临淘书网,请</span>
                    <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpLogin">登录</el-button>
                    <span style="padding-right: 20px;line-height: 40px;">|</span>
                    <el-button type="text" style="color: #666" class="top-title" @click="jumpRegister">注册</el-button>
                </div>
                <div style="flex: 1;display: flex;">
                    <div style="flex: 0.75;"></div>
                    <div style="width: 300px;display: flex;">
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpPersonalCenter"> <i class="el-icon-user"></i>个人中心</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCart"><i class="el-icon-shopping-cart-2"></i>购物车</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpOrders"><i class="el-icon-goods"></i>我的订单</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCollect"><i class="el-icon-star-off"></i>我的收藏</el-button>
                        <el-button type="text" v-show="visibleAlready" style="color: #666;margin-right: 10px;" class="top-title" @click=" killSession"><i class="el-icon-switch-button"></i>退出登录</el-button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <div style="margin-left: 21%;margin-right: 19%">
        <el-container>
            <el-aside width="250px" style="background-color: #545c64">
                <el-col style="width: 250px;height:700px;">
                    <el-menu default-active="1-2"
                             :default-openeds=["1","2"]
                             class="el-menu-vertical-demo"
                             background-color="#545c64"
                             text-color="#fff"
                             active-text-color="#ffd04b">
                        <el-submenu index="1" style="width: 250px;">
                            <template slot="title">
                                <i class="el-icon-user"></i>
                                <span >个人信息</span>
                            </template>
                            <el-menu-item index="1-1" @click="jumpPersonalCenter" >我的资料</el-menu-item>
                            <el-menu-item index="1-2" @click="jumpChangePwd" >修改密码</el-menu-item>
                            <el-menu-item index="1-3"  @click="jumpChangeAvatar" >更改头像</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2" style="width: 250px">
                            <template slot="title">
                                <i class="el-icon-location-outline"></i>
                                <span>地址管理</span>
                            </template>
                            <el-menu-item index="2-1" @click="jumpUserAddress">我的地址</el-menu-item>
                            <el-menu-item index="2-2" @click="jumpNewAddress">添加新地址</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-aside>
            <el-container>
                <el-header height="56px">
                    <el-link :underline="false" type="primary" href="/index.html" ><span
                            style="color: white; font-size: 20px">← 返回首页</span>
                    </el-link>
                </el-header>
                <el-main>
                    <br>
                    <el-row style="margin-left: 5%">
                        <el-col :span="6">
                            <el-avatar style="height: 150px;width:150px;" :src="User.userImg"></el-avatar>
                        </el-col>
                        <el-col :span="18" style="line-height:150px">
                            <span style="color:#2e2e2f;font-size:35px;margin-left:30px">{{User.realName}}{{call}}</span>
                        </el-col>
                    </el-row>
                    <hr style="border-width: 2px; border-color: #2e2e2f;border-style: solid">
                    <el-form ref="editPassword" :model="formData" :rules="rules"
                             label-width="100px">
                        <br>
                        <el-row :span="18">
                            <el-form-item label="旧密码:" prop="oldP" :span="18">
                                <el-input v-model="User.oldP" type="password"></el-input>
                            </el-form-item>
                        </el-row>

                        <el-row :span="18">
                            <el-form-item label="新密码:" prop="newP1" :span="18">
                                <el-input v-model="User.newP1" type="password"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row :span="18">
                            <el-form-item label="确认新密码:" prop="newP2" >
                                <el-input v-model="User.newP2" type="password"></el-input>
                            </el-form-item>
                        </el-row>
                        <br>
                        <el-form-item>
                            <div style="margin-left: 15%">
                                <el-button  type="primary" round @click="submitForm">确认修改
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-main>
            </el-container>
        </el-container>
    </div>
</div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: '#app',
        created() {
            //钩子函数，vue对象初始化后执行
            this.getUser()
        },
        methods: {
            submitForm() {
                this.$refs.editPassword.validate((valid) => {
                    if (valid) {
                        if (this.formData.oldP !== this.formData.password) {
                            //弹出消息提示
                            this.$message({
                                message: '旧密码输入错误',
                                type: 'error'
                            });
                        } else if (this.formData.newP1 !== this.formData.newP2) {
                            //弹出消息提示
                            this.$message({
                                message: '两次输入的密码不一致',
                                type: 'error'
                            });
                        } else {
                            this.formData.password = this.formData.newP1
                            axios.post("/user/update",
                                this.formData).then((res) => {
                                if (res.data.code==1) {
                                    //修改成功
                                    // 弹出消息提示
                                    setTimeout(this.$message({
                                        message:"密码修改成功",
                                        type: 'success'
                                    }));
                                    this.getUser();
                                }
                            })
                        }
                    } else {
                        // 弹出消息提示
                        this.$message({
                            message: "信息填写错误",
                            type: 'error'
                        });
                    }
                });
            },
            getUser(){//获取用户名
                //发送ajax请求
                axios({
                    method:"get",
                    url:"/user",
                }).then(resp =>{
                    this.User = resp.data;
                    this.formData=resp.data;
                    if (this.User.gender === '男') {
                        this.call = '先生'
                    } else {
                        this.call = '女士'
                    }
                    console.log(this.User);
                    if (this.User !== null && this.User !== ""&& this.User !==undefined) {
                        this.visibleNotYet = false;
                        this.visibleAlready= true;
                    }else{this.User={username:null}}
                })
            },
            killSession() {//退出登录
                this.$confirm('确认退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.visibleNotYet = true;
                    this.visibleAlready = false;
                    //发送ajax请求
                    axios.post("/user/logout").then((res) => {

                    })
                    window.location.href = "../index.html"
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            jumpLogin(){
                location.href ="/login_page/login.jsp";
            },
            jumpRegister(){
                location.href ="/login_page/register.jsp";
            },
            jumpPersonalCenter(){
                location.href ="personCenter.html";
            },
            jumpChangePwd(){
                location.href ="updatePwd.html";
            },
            jumpChangeAvatar(){
                location.href ="updateAvatar.html";
            },
            jumpUserAddress(){
                location.href ="userAddress.html";
            },
            jumpNewAddress(){
                location.href ="newAddress.html";
            },
            jumpCollect(){
                location.href ="/user_page/collect.html";
            },
            jumpOrders(){
                location.href ="orders.html";
            },
            jumpCart(){
                location.href ="cart.html";
            }
        },
        data() {
            return {
                User:[],//用户信息
                call: '',//先生或女士
                visibleNotYet:true,
                visibleAlready:false,
                buttonGroup:false,
                editProfile:true,
                formData:{
                    oldP:'',
                    newP1:'',
                    newP2:''
                },
                rules: {//校验密码
                    oldP: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    newP1: [
                        { required: true, message: '请输入新密码', trigger: 'blur' }
                    ],
                    newP2: [
                        { required: true, message: '请再次输入新密码', trigger: 'blur' }
                    ],
                }
            };
        }
    })
</script>
</html>